  <template>
    <el-table
      :data="tableData"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
            'background-color': 'pink',
            'color': '#fff',
            'font-weight': '400'
        }">
      >
      <el-table-column
        prop="date"
        label="日期"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        class-name="colname"
       >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
     name: "demoOne",
      data() {
        return {
          tableData: [{
            date: '90',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '200',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '150',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '50',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      mouted(){
        localStorage.setItem('myCat', 'Tom');
      },
      methods:{
        headerStyle ({row, column, rowIndex, columnIndex}) {
            return 'tableStyle'
         },
         tableRowClassName({row, rowIndex}) {
                  if (row.date>90) {
                    return 'warning-row';
                  }
                  // return 'warning-row'; 
        },
      }
    }
  </script>

 
<style lang = "scss" scoped>
  ::v-deep .tableStyle{
    background-color: #1989fa!important;
    color:#fff;
    font-weight:400;
  }

  ::v-deep .warning-row {
    background:#1989fa;
     color:#fff;
  }

  ::v-deep  .colname {
  background-color: yellow !important;
}

</style>

   